<template>
    <div class="hotActivityDetail w1200">
        <top></top>
    <mall-header></mall-header>
      <a-row class="hotActivityDetail_info">
        <a-col :span="11">
          <div class="hotActivityDetail_bigImg">
            <img :src="bigImg.img" alt="" />
          </div>
          <div class="hotActivityDetail_smallImg">
            <img :class="{'active':index == bigImg.index}" @click="changeImg(item,index)" v-for="(item,index) in exhibitionsDetail.imgList" :key="index" :src="item.fileUrl" alt="" />
          </div>
        </a-col>
        <a-col :span="13" class="hotActivityDetail_right">
          <div v-if="exhibitionsDetail.status == '01'" class="hotActivityDetail_tag tag1">即将开始</div>
          <div v-if="exhibitionsDetail.status == '02'"  class="hotActivityDetail_tag tag2">进行中</div>
          <div v-if="exhibitionsDetail.status == '03'"  class="hotActivityDetail_tag tag3">已结束</div>
          <div class="hotActivityDetail_title">{{ exhibitionsDetail.name }}</div>
          <div>
            <span>推荐指数：</span>
            <a-rate
              class="my-rate-style"
              v-model="exhibitionsDetail.recommendationIndex"
              :disabled="true"
              allow-half
            />
          </div>
          <div class="hotActivityDetail_time">
            <div class="hotActivityDetail_time_header">活动时间</div>
            <div class="hotActivityDetail_time_content">{{ exhibitionsDetail.beginTime }}/{{ exhibitionsDetail.endTime }}</div>
            <div class="hotActivityDetail_icon">
              <img src="@/assets/images/supplierDisplayCenter/容器.png" alt="" />
              <img
                src="@/assets/images/supplierDisplayCenter/容器 (1).png"
                alt=""
              />
              <img
                src="@/assets/images/supplierDisplayCenter/容器 (2).png"
                alt=""
              />
            </div>
          </div>
          <div class="MT20">
            <img
              src="@/assets/images/supplierDisplayCenter/路径 (1).png"
              alt=""
            />
            <span>举办地点：</span>
            <span>{{ exhibitionsDetail.areaName }}</span>
          </div>
          <div class="MT20">
            <img
              src="@/assets/images/supplierDisplayCenter/容器 (4).png"
              alt=""
            />
            <span>活动行业：</span>
            <span>{{ exhibitionsDetail.tradeName }}</span>
          </div>
          <div v-if="exhibitionsDetail.status != '03'" class="enroll_btn" @click="enrollClick">立即报名</div>
        </a-col>
      </a-row>
      <a-row>
        <a-tabs class="hotActivityDetail_content" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="活动信息">
        <div class="whiteBg">
          <a-row class="MT20">
            <a-col :span="8">
            <span>举办周期：</span>
            <span>{{ exhibitionsDetail.cycle||'暂无' }}</span>
            </a-col>
            <a-col :span="8">
            <span>活动规模：</span>
            <span v-if="exhibitionsDetail.peopleMin||exhibitionsDetail.peopleMax">{{exhibitionsDetail.peopleMin}} - {{ exhibitionsDetail.peopleMax }}</span>
            <span v-else>暂无</span>
            </a-col>
            <a-col :span="8">
            <span>举办展馆：</span>
            <span>{{ exhibitionsDetail.exhibitionHall||'暂无' }}</span>
            </a-col>
          </a-row>
          <a-row class="MT10">
            <a-col :span="8">
            <span>首届举办：</span>
            <span>{{ exhibitionsDetail.firstHold||'暂无' }}</span>
            </a-col>
            <a-col :span="8">
            <span>活动主办方：</span>
            <span>{{ exhibitionsDetail.sponsor||'暂无' }}</span>
            </a-col>
            <a-col :span="8">
            <span>媒体宣传：</span>
            <span>{{exhibitionsDetail.mediaInformation||'暂无' }}</span>
            </a-col>
          </a-row>
  
        </div>
          <p v-html="exhibitionsDetail.detailInfo" class="MT20 whiteBg"></p>
  
      </a-tab-pane>
      <a-tab-pane v-if="exhibitionsDetail.status == '03'" key="2" tab="活动回顾" force-render>
        <p v-html="exhibitionsDetail.reviewInfo" class="whiteBg"></p>
  
      </a-tab-pane>
    </a-tabs>
      </a-row>
     <enrollModal ref="enrollModal"></enrollModal>
    </div>
  </template>
      
  <script>
    import enrollModal from "./components/enrollModal";
    import MallHeader from '@/components/base/MallHeader.vue'
import { queryPopularExhibitionsDetail } from '@/api/portal'
import Top from '@/components/base/Top.vue'

  export default {
    name: "hotActivityDetail",
  
    components: {
      enrollModal,
      MallHeader,
      Top
    },
    data() {
      return {
        rateNum: 3,
        activeKey:'1',
        exhibitionsId: '',
        exhibitionsDetail: {},
        bigImg: {
          img: '',
          index: 0
        }
      };
    },
    mounted() {
      this.exhibitionsId = this.$route.query.id
      this.loadData()
    },  
    methods:{
      changeImg(item, index) {
        this.bigImg = {
          img: item.fileUrl,
          index: index
        }
        console.log(this.bigImg)
      },  
      enrollClick() {
        this.$refs.enrollModal.setTitleAndId(this.exhibitionsDetail.name,this.exhibitionsDetail.id);
        this.$refs.enrollModal.open();
      },
      loadData() {
        queryPopularExhibitionsDetail({exhibitionsId: this.exhibitionsId}).then((res) => {
            if (res.code == 0) {
              this.exhibitionsDetail = res.data;
              this.bigImg = {
                img: this.exhibitionsDetail.imgList[0].fileUrl,
                index: 0
              }
            }
          });
      }
    }
  };
  </script>
      
  <style scoped lang="scss">
  $colorPrimary: #c29a62;
  /deep/ .ant-tabs-nav .ant-tabs-tab-active {
    color: $colorPrimary !important;
  }
  /deep/ .ant-tabs-nav .ant-tabs-tab:hover {
    color: $colorPrimary !important;
  
  }
  /deep/ .ant-tabs-ink-bar {
    background-color: $colorPrimary !important;
  
  }
  /deep/ .ant-tabs-bar {
    margin-bottom: 0;
  }
  /deep/ .ant-tabs .ant-tabs-bottom-content, 
  /deep/.ant-tabs .ant-tabs-top-content {
  }
  .whiteBg {
    background-color: #fff;
    padding: 1px 20px 20px;
  
  }
  .my-rate-style {
    display: inline;
    font-size: 12px;
    vertical-align: top;
  }
  .hotActivityDetail {
    margin-top: 20px;
    height: 100%;
  
    .hotActivityDetail_info {
      width: 100%;
      // height: 388px;
      padding: 10px;
      background-color: #fff;
      .hotActivityDetail_right {
        padding: 20px 10px;
      }
      .hotActivityDetail_bigImg {
        width: 520px;
        height: 300px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .hotActivityDetail_smallImg {
        height: 100px;
        width: 520px;
        padding: 10px 0;
        img {
          width: 99px;
          height: 58px;
          cursor: pointer;
          margin-right: 5px;
          &.active {
            border: 2px solid orange;
          }
        }
      }
      .hotActivityDetail_tag {
        width: 76px;
        height: 22px;
        border-radius: 4px;
        opacity: 1;
        text-align: center;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        display: inline-block;
        box-sizing: border-box;
       
        &.tag1 {
          border: 1px solid #c29a62;
        color: #c29a62;
        }
        &.tag2 {
          border: 1px solid #009640;
        color: #009640;
        }
        &.tag3 {
          border: 1px solid #d61518;
        color: #d61518;
        }
        cursor: pointer;
      }
      .hotActivityDetail_title {
        margin: 15px 0;
        opacity: 1;
  
        font-family: PingFang SC;
        font-size: 22px;
        font-weight: normal;
        line-height: 22px;
        letter-spacing: 0px;
        overflow:hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
        color: #323232;
      }
      .hotActivityDetail_time {
        position: relative;
        margin-top: 20px;
        .hotActivityDetail_time_header {
          border-radius: 4px 4px 0px 0px;
          opacity: 1;
          width: 100%;
          height: 32px;
          padding-left: 110px;
          color: #fff;
          line-height: 32px;
          background: linear-gradient(
            90deg,
            #c29a62 0%,
            rgba(194, 154, 98, 0) 117%
          );
        }
        .hotActivityDetail_time_content {
          width: 100%;
          height: 48px;
          border-radius: 4px;
          opacity: 1;
          padding-left: 5px;
          background: #fff3e7;
          font-size: 18px;
          color: #c29a62;
          line-height: 48px;
        }
        .hotActivityDetail_icon {
          position: absolute;
          top: 9px;
          right: 59px;
          img {
            width: 65px;
            height: 56px;
          }
        }
  
      }
      .enroll_btn {
          width: 110px;
          height: 34px;
          border-radius: 407px;
          opacity: 1;
          display: inline-block;
          background: #c29a62;
          color: #fff;
          text-align: center;
          line-height: 34px;
          margin-top: 30px;
          cursor: pointer;
        }
    }
  }
  </style>
      